<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="layout" content="wechat"/>
    <title>免费评房</title>
</head>

<body>
<header class="create-header">
    <ul class="creat-flowList flex-box">
        <li data-id="01" class="flex1 active">
            <span></span>

            <h3>小区信息</h3>
        </li>
        <li data-id="02" class="flex1">
            <span></span>

            <h3>房产信息</h3>
        </li>
        <li data-id="03" class="flex1">
            <span></span>

            <h3>极速询值</h3>
        </li>
    </ul>
</header>

<form resource="${this.house}" action="wxCreate2Step4Save" id="wxCreate2Form3" method="post" class="wxCreate2Form3">
    <input type="hidden" name="openId" value="${this.openId}"/>
    <input type="hidden" id="status" name="status" value=""/>
    <input type="hidden" id="externalId" name="externalId" value=""/>
    <input type="hidden" id="unitPrice" name="unitPrice" value=""/>

    <div class="bgcWhite wxCreate weui-cells weui-cells_form">
        <div class="weui-cell weui-cell_select weui-cell_select-after">
            <div class="weui-cell__hd"><label class="weui-label">所在城市</label></div>

            <div class="weui-cell__bd weui-cell_primary">
                <g:select class="weui-select" name="city" id="city" optionKey="id" optionValue="name"
                          from="${this.cityList}" value="${this.house?.city?.id}" noSelection="['': '请选择']"/>
                <!-- <g:field class="weui-input" type="text" readonly="readonly" id="cityName" name="cityName"
                              value="${this.leads?.city?.name}"/> -->
            </div>
        </div>

        <div class="weui-cell weui-cell_select weui-cell_select-after">
            <div class="weui-cell__hd"><label class="weui-label">所在区县</label></div>

            <div class="weui-cell__bd weui-cell_primary">
                <select class="weui-select" name="district" id="districtList">
                </select>
                <!-- <g:field class="weui-input" type="text" id="district" name="district"
                              value="${this.house?.district}"/> -->
            </div>
        </div>

        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">房屋坐落</label></div>
            <input type="hidden" id="communityId" name="communityId" value="${params.communityId}"/>
            <!-- <input class="communityId" type="text" id="communityId" name="communityId" value="380247005"/> -->

            <div class="weui-cell__bd weui-cell_primary">
                <!-- <g:textField class="weui-input" type="text" id="projectName" name="projectName" value=""
                                  autofocus="autofocus"/> -->
                <g:textField class="weui-input" type="text" id="projectName" name="projectName"
                             value="${this.house?.projectName}"/>
            </div>
        </div>

        <div class="weui-cell projectNameListDiv" style="display: none">
            <div class="weui-cell__hd"><label class="weui-label"></label></div>

            <div class="weui-cell__bd weui-cell_primary projectNameList">

            </div>

        </div>

        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">楼（幢）号</label></div>
            <input type="hidden" id="buildingId" name="buildingId" value=""/>

            <div class="weui-cell__bd weui-cell_primary">
                <g:textField class="weui-input" type="number" id="building" name="building"
                             value="${this.house?.building}" placeholder="如：5"/>
            </div>
        </div>

        <div class="weui-cell buildingListDiv" style="display: none">
            <div class="weui-cell__hd"><label class="weui-label"></label></div>

            <div class="weui-cell__bd weui-cell_primary buildingList">
                <select class="weui-select" name="">

                </select>
            </div>

        </div>

        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">单元号</label></div>
            <input type="hidden" id="unitId" name="unitId" value=""/>

            <div class="weui-cell__bd weui-cell_primary">
                <g:textField class="weui-input" type="number" id="unit" name="unit" value="${this.house?.unit}"
                             placeholder="如：5"/>
            </div>
        </div>

        <div class="weui-cell unitListDiv" style="display: none">
            <div class="weui-cell__hd"><label class="weui-label"></label></div>

            <div class="weui-cell__bd weui-cell_primary unitList">
                <select class="weui-select" name="">

                </select>
            </div>

        </div>

        <div class="weui-cell">
            <div class="weui-cell__hd"><label
                    class="weui-label">房&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</label></div>

            <div class="weui-cell__bd weui-cell_primary">
                <g:textField class="weui-input" type="text" id="roomNumber" name="roomNumber"
                             value="${this.house?.roomNumber}" placeholder="如：201"/>
            </div>
        </div>

        <div class="weui-cell houseListDiv" style="display: none">
            <div class="weui-cell__hd"><label class="weui-label"></label></div>

            <div class="weui-cell__bd weui-cell_primary houseList">
                <select class="weui-select" name="">

                </select>
            </div>

        </div>

        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">面积</label></div>

            <div class="weui-cell__bd weui-cell_primary">
                <g:field class="weui-input" type="number" name="area" id="area" value="${this.house?.area}"
                         placeholder="如：110"/>
            </div>

            <div class="weui-cell__hd"><label class="weui-label" style="margin-right: 0">（m<sup>2</sup>）</label></div>
        </div>
    </div>

    <div class="bgcWhite wxCreate weui-cells weui-cells_form sepLine">
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">所在层</label></div>

            <div class="weui-cell__bd weui-cell_primary">
                <input id="floor" name="floor" class="weui-input" type="number" value="${this.house?.floor}"
                       placeholder="自动带出">

            </div>
        </div>

        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">总楼层</label></div>

            <div class="weui-cell__bd weui-cell_primary">

                <input id="totalFloor" name="totalFloor" class="weui-input" type="number"
                       value="${this.house?.totalFloor}" placeholder="自动带出">
            </div>
        </div>

        <div class="bigBtn">
            <button type="button" class="linkBtn weui-btn weui-btn_plain_default" id="wxcreateStep3Btn">下一步</button>
        </div>
</form>



%{--提示信息和验证--}%
<div class="message-box">
    <div class="helpMsg hide"></div>
    <g:if test="${flash.message}">
        <div class="message" role="status">
            ${flash.message}
        </div>
    </g:if>
</div>

<g:javascript>
    $(function () {
        function getDistrict() {
            $.ajax({
                type: "POST",
                url: "/wechatOpportunity/wxGetDistrictByCity",
                data: {
                    city: $("#city").val(),
                },

                success: function (data) {
                    if (data.status == "success") {
                        var dataList = data.districtList;
                        $('#districtList').html("");
                        if (dataList.length > 0) {
                            var option = '<option value="">请选择</option>';
                            for (var i = 0; i < dataList.length; i++) {
                                option += '<option value="' + dataList[i] + '">' + dataList[i] + '</option>';
                            }
                            $("#districtList").append(option);

                        }


                    }
                },
                error: function () {
                    helpMessage("区县获取失败，请稍后重试");
                }
            });
        }

        function getProjectName() {
            $.ajax({
                type: "POST",
                url: "/wechatOpportunity/wxGetCommunityByDistrict",
                data: {
                    projectName: $("#projectName").val(),
                    city: $("#city").val(),
                    district: $("#district").val(),
                },

                success: function (data) {
                    if (data.status == "success") {
                        $(".projectNameList").html("");
                        var projectNameList = data.projectNameList;
                        $(".projectNameListDiv").attr("style", "display:block;");
                        var content = '<h4 class="colorRed" style="margin-top: 4px">未找到对应的小区，点此直接提交！</h4>';

                        for (var i = 0; i < projectNameList.length; i++) {
                            content += '<div class="weui-media_box weui-media_text projectNameItem">';
                            content += '<h4 class="weui-media_title">' + projectNameList[i].communityName + '</h4>';
                            content += '<p class="weui-media_desc">' + projectNameList[i].address + '</p>';
                            content += '<span class="hide">' + projectNameList[i].communityId + '</span>';
                            content += '</div>'

                        }
                        $(".projectNameList").append(content);
                    }

                    else {
                        console.log("获取小区接口返回异常：" + data.errorMsg);
                    }
                },
                error: function () {
                    console.log("获取小区接口请求失败");
                }
            });
        }

        function getBuilding() {
            $.ajax({
                type: "POST",
                url: "/wechatOpportunity/wxGetBuildingByCommunity",
                data: {
                    cityId: $("#city").val(),
                    communityId: $("#communityId").val(),
                    building: $("#building").val(),
                },

                success: function (data) {
                    if (data.status == "success") {
                        var buildingList = data.buildingList;
                        if (buildingList.length > 0) {
                            $(".buildingListDiv").attr("style", "display:show;");
                        }
                        $(".buildingList select").html("");

                        var option = '<option value="">请选择楼号</option>';
                        for (var i = 0; i < buildingList.length; i++) {
                            option += '<option dataBuildingId="' + buildingList[i].buildingId + '"dataTotalFloor="' + buildingList[i].totalFloor + '"value="' + buildingList[i].buildingName + '">' + buildingList[i].buildingName + '</option>';
                        }
                        $(".buildingList select").append(option);
                    }
                    else {
                        console.log("获取楼栋接口返回异常：" + data.errorMsg);
                    }
                },
                error: function () {
                    console.log("获取楼栋接口请求失败");
                }
            });
        }

        function getUnit() {
            $.ajax({
                type: "POST",
                url: "/wechatOpportunity/wxGetUnitByBuilding",
                data: {
                    cityId: $("#city").val(),
                    communityId: $("#communityId").val(),
                    buildingId: $("#buildingId").val(),
                    unit: $("#unit").val(),
                },

                success: function (data) {
                    if (data.status == "success") {
                        var unitList = data.unitList;
                        if (unitList.length > 0) {
                            $(".unitListDiv").attr("style", "display:show;");
                        }
                        $(".unitList select").html("");

                        var option = '<option value="">请选择单元号</option>';
                        for (var i = 0; i < unitList.length; i++) {
                            option += '<option dataUnitId="' + unitList[i].unitId + '"dataTotalFloor="' + unitList[i].totalFloor + '"value="' + unitList[i].unitName + '">' + unitList[i].unitName + '</option>';
                        }
                        $(".unitList select").append(option);
                    }
                    else {
                        console.log("获取单元接口返回异常：" + data.errorMsg);
                    }
                },
                error: function () {
                    console.log("获取单元接口请求失败");
                }
            });
        }

        function getHouse() {
            $.ajax({
                type: "POST",
                url: "/wechatOpportunity/wxGetHouseByUnit",
                data: {
                    cityId: $("#city").val(),
                    buildingId: $("#buildingId").val(),
                    unitId: $("#unitId").val(),
                    house: $("#roomNumber").val(),
                },

                success: function (data) {
                    if (data.status == "success") {
                        var houseList = data.houseList;
                        if (houseList.length > 0) {
                            $(".houseListDiv").attr("style", "display:show;");
                        }
                        $(".houseList select").html("");

                        var option = '<option value="">请选择房号</option>';
                        for (var i = 0; i < houseList.length; i++) {
                            option += '<option dataFloor="' + houseList[i].floor + '"dataBuildingArea="' + houseList[i].buildingArea + '"dataTotalFloor="' + houseList[i].totalFloor + '"value="' + houseList[i].house + '">' + houseList[i].house + '</option>';
                        }
                        $(".houseList select").append(option);
                    }
                }
                else {
                    console.log("获取户接口返回异常：" + data.errorMsg);
        }
        },
            error: function () {
                console.log("获取户接口请求失败");
            }
        }

    );
    }


    //
    // $("#district-1").change(function () {
    //     // var district=$("#district-1 option:selected").val();
    //     $("#district-2").val($("#district-1 option:selected").val());
    //     $("#district-1").hide();
    //     $("#district-2").show();
    // });
    // 动态获取县区
    $("#city").change(function () {
        getDistrict();
    });

    // 动态获取小区
    $("#projectName").bind('input propertychange', function () {
        $("#communityId").val("");
        $(".projectNameListDiv").attr("style", "display:none;");
        getProjectName();
    });

    // 动态获取楼栋
    $(".projectNameList").delegate(" .projectNameItem", "click", function () {
        var housecell = $(this).children("h4").text().trim();
        $("#projectName").val(housecell);
        var communityId = $(this).children("span").text().trim();
        $("#communityId").val(communityId);
        $(".projectNameListDiv").attr("style", "display:none;");
        getBuilding();
    });
    $(".projectNameList").delegate(" h4", "click", function () {
        $(".projectNameListDiv").attr("style", "display:none;");
    });
    $("#building").bind('input propertychange', function () {
        $("#buildingId").val("");
        $("#totalFloor").val("");
        $(".buildingListDiv").attr("style", "display:none;");
        getBuilding();
    });

    //动态获取单元
    $(".buildingList").delegate("select", "change", function () {
        var selectOption = $(".buildingList select option:selected");
        $("#building").val(selectOption.val().trim());
        $("#buildingId").val(selectOption.attr("dataBuildingId").trim());
        $("#totalFloor").val(selectOption.attr("dataTotalFloor").trim());
        $(".buildingListDiv").attr("style", "display:none;");
        getUnit();
    });

    $("#unit").bind('input propertychange', function () {
        $("#unitId").val("");
        $("#totalFloor").val("");
        $(".unitListDiv").attr("style", "display:none;");
        getUnit();
    });

    //动态获取户
    $(".unitList").delegate("select", "change", function () {
        var selectOption = $(".unitList select option:selected");
        $("#unit").val(selectOption.val().trim());
        $("#unitId").val(selectOption.attr("dataUnitId").trim());
        $("#totalFloor").val(selectOption.attr("dataTotalFloor").trim());
        $(".unitListDiv").attr("style", "display:none;");
        getHouse();
    });
    $("#unit").focus(function () {
        $(".creat-flowList li:nth-child(2)").addClass("active");
    });
    $("#roomNumber").focus(function () {
        $(".creat-flowList li:nth-child(2)").addClass("active");
    });
    $("#area").focus(function () {
        $(".creat-flowList li:nth-child(2)").addClass("active");
    });

    $("#roomNumber").bind('input propertychange', function () {
        $("#floor").val("");
        $("#totalFloor").val("");
        $("#area").val("");
        $(".houseListDiv").attr("style", "display:none;");
        getHouse();
    });
    $(".houseList").delegate("select", "change", function () {
        var selectOption = $(".houseList select option:selected");
        $("#roomNumber").val(selectOption.val().trim());
        $("#floor").val(selectOption.attr("dataFloor").trim());
        $("#totalFloor").val(selectOption.attr("dataTotalFloor").trim());
        $("#area").val(selectOption.attr("dataBuildingArea").trim())
        $(".houseListDiv").attr("style", "display:none;");
    });

    $("#building").val("");
    $("#unit").val("");
    $("#area").val("");

    $("#wxcreateStep3Btn").click(function () {

        // 所属城市
        var city = $("#city").val().trim();
        if (!city) {
            helpMessage("请输入所在城市");
            return;
        }

        // 所在区县
        var district = $("#districtList").val().trim();
        if (!district) {
            helpMessage("请输入所在区县");
            return;
        }

        // 所在小区
        var projectName = $("#projectName").val().trim();
        if (!projectName) {
            helpMessage("请输入所在小区");
            return;
        }

        // 楼栋信息
        var building = $("#building").val().trim();
        if (!building) {
            helpMessage("请输入楼栋信息");
            return;
        }


        // 单元信息
        var unit = $("#unit").val().trim();
        if (!unit) {
            $("#unit").val(0);
            unit = 0;
        }

        // 楼层信息
        var floor = $("#floor").val().trim();
        var totalFloor = $("#totalFloor").val().trim();
        if (!floor) {
            helpMessage("请输入所在楼层");
            return;
        }
        if (!(/^-?[1-9]\d*$/.test(floor))) {
            helpMessage("请输入正确的所在楼层");
            return;
        }
        if (!totalFloor) {
            helpMessage("请输入总楼层");
            return;
        }
        if (!(/^-?[1-9]\d*$/.test(totalFloor))) {
            helpMessage("请输入正确的总楼层");
            return;
        }
        if (parseInt(floor) > parseInt(totalFloor)) {
            helpMessage("所在楼层必须小于等于总楼层");
            return;
        }

        // 户号
        var roomNumber = $("#roomNumber").val().trim();
        if (!roomNumber) {
            helpMessage("请输入户号");
            return;
        }

        // 面积
        var area = $("#area").val().trim();
        if (!area) {
            helpMessage("请输入住宅面积");
            return;
        }
        if (area <= 0) {
            helpMessage("住宅面积必须大于0");
            return;
        }

        // 询价并提交表单
        $('#wxcreateStep3Btn').addClass("btn_disabled").attr('disabled', 'disabled');
        $.ajax({
            type: "POST",
            url: "/wechatOpportunity/wxQueryPrice",
            data: {
                city: city,
                district: district,
                projectName: projectName,
                building: building,
                unit: unit,
                floor: floor,
                roomNumber: roomNumber,
                totalFloor: totalFloor,
                area: area,

            },
            beforeSend: function () {
                $(".helpMsg").html("");
                var html = '<h4 class="msg1">评房信息已提交</h4>' + '<h5 class="msg2">系统正在评估中，请稍等 <span class="colorRed">15-30s</span>，返回评房结果</h5>';
                $(html).appendTo($(".helpMsg"));
                $(".helpMsg").fadeIn(200);
            },
            success: function (data) {
                if (data.status == "success") {
                    var price = data.price
                    $("#status").val(data["collateralStatus"]);
                    $("#externalId").val(price["evaluateCode"]);
                    $("#unitPrice").val(price["unitprice"]);
                    $("#wxCreate2Form3").submit();
                } else {
                    helpMessage(data.errorMsg);
                    return;
                }
            }
        });
    });

    setTimeout(function () {
        $(".message").fadeOut(200);
    }, 2000);

    function helpMessage(message) {
        $(".helpMsg").text(message).fadeIn(200);
        setTimeout(function () {
            $(".helpMsg").fadeOut(200);
        }, 2000);
    }
    });
</g:javascript>
</body>
</html>
